<form [formGroup]="form" (ngSubmit)="resetPass()" role="form" >
  <mat-tab-group mat-align-tabs="start" mat-stretch-tabs="false" disableRipple>
    <mat-tab [label]="'Auth.ChangePassword' | translate: {Default: 'Change Password'}">
      <div class="p-4 flex flex-col items-stretch gap-2">

        <div>
          <label for="password" class="block mb-2 text-base font-medium text-gray-900 dark:text-white">
            {{ 'Auth.NewPassword' | translate: {Default: 'New Password'} }}
          </label>

          <input matInput type="password" name="password" id="password" formControlName="password"
            class="ngm-input-element"
            placeholder="••••••••">

          @if (passwordControl.dirty && passwordControl.invalid) {
            <mat-error class="text-red-500">
              @if (passwordControl.hasError('required')) {
                <span>{{ 'Auth.Required' | translate: {Default: 'Required'} }}</span>
              }
              @if (passwordControl.hasError('minlength')) {
                <span>{{ 'Auth.AtLeast8Characters' | translate: {Default: 'Must be at least 8 characters long'} }}</span>
              }
            </mat-error>
          }
          @if (strength) {
            <div class="my-2">
              <mat-progress-bar mode="determinate" [value]="passwordProgressMap[strength]?.progress ?? 0"
                [color]="passwordProgressMap[strength]?.color ?? 'warn'"></mat-progress-bar>
            </div>
          }
        </div>

        <div>
          <label for="confirm_password" class="block mb-2 text-base font-medium text-gray-900 dark:text-white">
            {{ 'Auth.ConfirmPassword' | translate: {Default: 'Confirm Password'} }}
          </label>

          <input matInput type="password" name="confirm_password" id="confirm_password" formControlName="confirmPassword"
            class="ngm-input-element"
            placeholder="••••••••">
          
          @if (mismatch) {
            <mat-error class="text-red-500"><span>{{ 'Auth.Mismatch' | translate: {Default: 'Mismatch'} }}</span></mat-error>
          }
        </div>

        <div class="w-full flex justify-end">
          <button class="pac-auth__submit-button" mat-raised-button color="primary" type="submit"
              [disabled]="submitted || form.invalid">
              {{ 'Auth.Change' | translate: {Default: 'Change'} }}
          </button>
        </div>

        <mat-divider style="margin: 1rem 0;"></mat-divider>

        <div class="w-full flex justify-between items-center">
          <a routerLink="/auth/login">{{ 'Auth.Login' | translate: {Default: 'Login'} }}</a>
          <a routerLink="/auth/request-password">{{ 'Auth.ForgetPassword' | translate: {Default: 'Forget Password'} }}</a>
        </div>
      </div>
    </mat-tab>
  </mat-tab-group>
</form>